<!--
  - Copyright(c)  2022 厦门外里科技有限公司 All rights reserved.
  -
  - https://www.wailikeji.com
  -
  - 版权所有，侵权必究！
  -->

<template>
	<view class="wrap">
		<view class="header">
			<view class="userinfo">
				<view class="left">
					<u-avatar v-if="!user" src="" mode="square"></u-avatar>
					<u-avatar v-else-if="!user.userAvatar" :src="getDefaultAvatar(user.phone)" mode="square"></u-avatar>
					<!-- <u-avatar v-if="!user.userAvatar" src="/static/images/my/index/nan.jpeg" mode="square"></u-avatar> -->
					<u-avatar v-else :src="baseUrl+user.userAvatar" mode="square"></u-avatar>
				</view>
				<view class="header-content">
					<view class="box" style="display: flex;">
						<view class="test">
							<view style="display: flex;">
								<u-line class="u-line" length="20rpx" direction="col" margin="10rpx 10rpx"></u-line>
								<view class="username">{{user&&user.username?user.username:'未登录'}}</view>
							</view>
							<view style="display: flex;">
								<u-line class="u-line" length="20rpx" direction="col" margin="10rpx 10rpx"></u-line>
								<view class="id">UID:{{user&&user.userId?user.userId:""}}</view>
							</view>
						</view>
						<u-button v-if="user&&user.passwordIsNull" class="changeassword" type="primary" size="medium"
							style=" width: 160rpx; height:60rpx;" @click="navTo('./pwd')">设置密码 </u-button>
						<u-button v-else-if="user&&user.passwordIsNull==false" class="changeassword" type="primary" size="medium"
							style=" width: 160rpx; height:60rpx;" @click="navTo('./pwd')">修改密码 </u-button>
					</view>
				</view>
			</view>
			<u-row class="userinfo-data" gutter="16" justify="center">
				<u-col span="3" text-align="center" @click="navTo('./moneyRecord')" style="display: flex;">
					<view style="width: 100%;">
						<view class="number">{{user&&user.money?user.money:0}}</view>
						<view class="dsc">可提佣金</view>
					</view>
					<u-line class="u-line" length="50rpx" direction="col"></u-line>
				</u-col>
				<u-col span="3" text-align="center" @click="navTo('./goldRecord')" style="display: flex;">
					<view style="width: 100%;">
						<view class="number">{{user.gold?user.gold:0}}</view>
						<view class="dsc">可用积分</view>
					</view>
					<u-line class="u-line" length="50rpx" direction="col"></u-line>
				</u-col>
				<u-col span="3" text-align="center" @click="navTo('./teamList')" style="display: flex;">
					<view style="width: 100%;">
						<view class="number">{{user.directlyInviteCount?user.directlyInviteCount:0}}</view>
						<view class="dsc">直邀好友</view>
					</view>
					<u-line class="u-line" length="50rpx" direction="col"></u-line>

				</u-col>
				<u-col span="3" text-align="center" @click="navTo('./teamList')" style="display: flex;">
					<view style="width: 100%;">
						<view class="number">{{user.indirectlyInviteCount?user.indirectlyInviteCount:0}}</view>
						<view class="dsc">间邀好友</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="panel" style="margin-top: -70upx; ">
			<view class="panel-content">
				<u-row justify="center" gutter="16">
					<u-col span="2">
						<image src="../../static/images/my/index/huangguan.png"
							style="width: 80upx; height: 70upx; margin: 15upx 30upx;"></image>
					</u-col>
					<u-col span="6">
						<view style=" height: 70upx; margin: 15upx">
							<view class="dsc">{{getVipDes()}}</view>
							<view class="number" style="color: #b3b3b3; font-size: 26upx;">{{getVipTip()}}</view>
						</view>
					</u-col>
					<u-col span="4" text-align="center">
						<u-button v-if="user&&user.userId" class="changeassword" type="primary" size="medium"
							style="width: 100rpx; height:65rpx;border-radius: 40upx;" @click="openVipIsShow=true">开通会员
						</u-button>
						<u-button v-else class="changeassword" type="primary" size="medium"
							style="width: 100rpx; height:65rpx;border-radius: 40upx;" @click="signOut">去登录
						</u-button>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="panel">
			<view class="panel-content" style="display: flex;">
				<view class="left" style="width: 50%;">
					<u-cell-item icon="man-add-fill" :iconStyle="{ color: '#5f8dff' }" title="我的团队"
						@click="navTo('./teamManage')" :border-bottom="false" :arrow="false" hover-class="none"
						:title-style="titleStyle">
					</u-cell-item>
					<u-cell-item icon="edit-pen" :iconStyle="{ color: '#ffa734' }" title="签到" @click="navTo('./sign')"
						:border-bottom="false" :arrow="false" hover-class="none" :title-style="titleStyle">
					</u-cell-item>

				</view>
				<view class="right" style="width: 50%;">
					<u-cell-item icon="rmb-circle-fill" :iconStyle="{ color: '#4fc08d' }" title="积分充值"
						@click="showRecharge()" :border-bottom="false" :arrow="false" hover-class="none"
						:title-style="titleStyle">
					</u-cell-item>
					<u-cell-item icon="share" :iconStyle="{ color: '#ff2229' }" title="邀请好友" @click="navTo('./share2')"
						:border-bottom="false" :arrow="false" hover-class="none" :title-style="titleStyle">
					</u-cell-item>
				</view>
			</view>
		</view>
		<view class="panel">
			<view class="panel-content">
				<u-cell-item icon="chat" :iconStyle="{ color: '#4fc08d' }" title="我的微信群" @click="navTo('./qunCard')"
					:border-bottom="false" hover-class="none" :title-style="titleStyle">
				</u-cell-item>
				<u-cell-item icon="account" :iconStyle="{ color: '#ff8a00' }" title="我的个人名片"
					@click="navTo('./personalCard')" :border-bottom="false" hover-class="none"
					:title-style="titleStyle">
				</u-cell-item>
				<u-cell-item icon="zhifubao-circle-fill" :iconStyle="{ color: '#ff2229' }" title="佣金提现"
					@click="navTo('./withdraw')" :border-bottom="false" hover-class="none" :title-style="titleStyle">
				</u-cell-item>
				<u-cell-item icon="file-text" :iconStyle="{ color: '#ffa734' }" title="积分明细"
					@click="navTo('./goldRecord')" :border-bottom="false" hover-class="none" :title-style="titleStyle">
				</u-cell-item>
				<!-- 				<u-cell-item icon="kefu-ermai" :iconStyle="{ color: '#5f8dff' }" title="意见反馈"
					@click="navTo('./comment')" :border-bottom="false" hover-class="none" :title-style="titleStyle">
				</u-cell-item> -->
				<u-cell-item icon="server-man" :iconStyle="{ color: '#ff8a00' }" title="联系客服"
					@click="navTo('./service2')" :border-bottom="false" hover-class="none" :title-style="titleStyle">
				</u-cell-item>
				<u-cell-item icon="info" :iconStyle="{ color: '#999999' }" title="关于我们" @click="navTo('./about')"
					:border-bottom="false" hover-class="none" :title-style="titleStyle">
				</u-cell-item>
				<u-cell-item icon="backspace" :iconStyle="{ color: '#fc0107' }" title="退出登录" @click="signOut()"
					:border-bottom="false" hover-class="none" :title-style="titleStyle">
				</u-cell-item>
			</view>
		</view>

		<u-popup v-model="openVipIsShow" border-radius="30" mode="bottom" :closeable="true">
			<buy-vip></buy-vip>
		</u-popup>
		<u-popup v-model="rechargeIsShow" border-radius="30" mode="bottom" :closeable="true">
			<buy-gold></buy-gold>
		</u-popup>
	</view>
</template>
<script>
	import {
		API_URL
	} from '@/env'
	import buyGold from '@/components/my/buyGold.vue'
	import buyVip from '@/components/my/buyVip.vue'
	export default {
		data() {
			return {
				baseUrl: API_URL,
				titleStyle: {
					color: "#303133"
				},
				rechargeIsShow: false, //积分充值弹窗是否显示
				openVipIsShow: false, //开通会员弹窗是否显示
				user: this.$store.state.user.userInfo,
			};
		},
		components: {
			buyGold,
			buyVip
		},
		//页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		onShow() {
			let _this = this;
			console.log("onShow", _this.user)
			this.$store.dispatch('getUserInfo')
				.then(res => {
					_this.user = res.data;
				}).catch(e => {
					_this.user={}
				});
		},
		methods: {
			getDefaultAvatar(phone) {
				let path = "/static/images/my/index/header/"
				let avatar
				if (phone) {
					let endStr = phone.substr(phone.length - 1, 1);
					avatar = path + endStr + ".jpeg"

				} else {
					avatar = path + 'nul.jpeg'
				}
				console.log("头像：", avatar)
				return avatar;
			},
			/**
			 * 获取会员描述
			 */
			getVipDes() {
				if (this.user.vipLevel === 1) {
					if('2050-06-23 00:00:00'<this.user.vipEndTime){
						return "永久会员"
					}
					return "已开通"
				} else {
					return "未开通"
				}
			},
			/**
			 * 获取会员提示
			 */
			getVipTip() {
				if (this.user.vipLevel === 1) {
					return "已开通"
				} else {
					return "开通会员免积分加群"
				}
			},
			/**
			 * 跳转路由
			 * @param {Object} url
			 */
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			showRecharge() {
				this.rechargeIsShow = true;
			},
			/**
			 * 退出登录
			 */
			signOut() {
				this.$api.api('signOut')
					.then(res => {
						if (res.code == 200) {

						} else {

						}
					})
				this.$store.commit('OUT_LOGIN');
				this.$tools.routerTo('/pages/login/login');
			},

		}
	};
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	//头部
	.header {
		background-color: #4fc08d;
		color: #ffffff; //字体色
		height: 350upx;
		padding-top: 50upx;

		//用户信息
		.userinfo {
			display: flex;

			.left {
				margin-left: 70rpx;
			}

			.header-content {
				width: 90%;

				.box {
					.test {
						width: 50%;
						margin-left: 20rpx;
					}
				}
			}
		}

		//用户数据
		.userinfo-data {
			padding: 10px 15px;

			//用户数据值
			.number {
				margin-bottom: 4px;
				font-size: 38upx;
				font-family: DINPro;
			}

			//用户数据描述
			.dsc {
				font-family: PingFang SC;
				font-weight: 500;
				color: #f4edf9;
			}
		}
	}

	.panel {
		padding: 0 30upx 0;

		.panel-content {
			background: white;
			margin: 0 auto;
			border-radius: 16upx; //面包圆形倒角
			box-shadow: 0 2upx 20upx rgba(183, 183, 183, 0.3); //周边阴影
			margin-top: 16upx; //顶部间隔
		}
	}

	.u-cell {
		padding: 10px 15px 8px 15px;
	}
</style>
